<template>
   <div id="addApplyFor">
        <div class="wx-content">
                <!-- 图片 -->
                <div class="wx-content-img">
                    
                </div>
                <!-- 表单 -->
                <mu-paper class="wx-content-1">
                        <!-- 用户头像 -->
                        <ul>
                           <li>     
                                    <i class="iconfont">&#xe60f;</i>&nbsp;&nbsp;姓名
                                    <mu-text-field  id="name" class="demo-divider-form" :underlineShow="false" v-model="Name"/>
                                    <mu-divider/>
                           </li>
                           <li class="box-radio">
                                    <i class="iconfont">&#xe612;&nbsp;&nbsp;</i><span class="sp">性别</span>
                                    <span class="radio">
                                         <mu-radio label="男" name="group" nativeValue="男"  class="demo-radio" v-model="Sex"/>
                                         <mu-radio label="女" name="group" nativeValue="女"  class="demo-radio" v-model="Sex"/>        
                                    </span>
                                    <mu-divider class="line"/>
                           </li>
                           <li>
                                   <i class="iconfont">&#xe66d;</i>&nbsp;&nbsp;<span class="sp1">公司</span>
                                   <mu-text-field  id="company" class="demo-divider-form" :underlineShow="false" v-model="Company"/>
                                   <mu-divider/>
                           </li>
                           <li>
                                  <i class="iconfont">&#xe6be;</i>&nbsp;&nbsp;职位
                                  <mu-text-field  id="post" class="demo-divider-form" :underlineShow="false" v-model="Job"/>
                                  <mu-divider/> 
                           </li>
                           <li>
                                 <i class="iconfont iconfont-tel">&#xe613;</i>&nbsp;&nbsp; 手机号
                                 <mu-text-field  id="telphone" class="demo-divider-form" :underlineShow="false" v-model="Phone"/>
                                 <mu-divider/>  
                           </li>
                           <li>
                                 <i class="iconfont iconfont-eml">&#xe615;</i>&nbsp;&nbsp;电子邮箱
                                 <mu-text-field id="mail" class="demo-divider-form" :underlineShow="false" v-model="Email"/>  
                           </li>
                        </ul>
                </mu-paper>

                <div class="wx-footer">
                        <button id="btn" @click="AddApplyFor()">提交</button>
                </div>
                
        </div>
        
   </div>
</template>

<script>
  import Vue from 'vue' 
export default {
	name: 'search',
	data() {
		return {
                        Name:'aaaa',
                        Sex:'',
                        Company:'北京',
                        Job:'',
                        Phone:'',
                        Email:'',
                        RmsType:'0',//目前不用添加
                        State:'0'
		}
        },
        //计算属性
	computed: {
                //计算属性 这种方法只能读取不能同步修改
                // aaa:function(){
                //     return this.Name
                // }
                // 可以计算属性  能读取能修改。
		// aaa:{
                //         get:function(){
                //                 return this.Name
                //         },
                //         set:function(nevalue){
                //           this.Name = nevalue;
                //         }
                // }
        },
        //方法
	methods: {
           getPayData(){
                return {
                    Name:this.Name,
                    Sex:this.Sex,
                    Company:this.Company,
                    Job:this.Job,
                    Phone:this.Phone,
                    Email:this.Email,
                    RmsType:this.RmsType,
                    State:'0'     
                }
           },     
	   AddApplyFor(){
              this.$axios({
                  method: 'post',
                  url: '/api/Trial',
                  data: this.getPayData(),
               })
               .then((res) => {
                     if( res.data.code == 0 ){
                           this.$kiko_message({
                              message: '提交成功',
                              time: 3000
                           })
                     } else {
                           this.$kiko_message({
                              message: '提交失败',
                              time: 3000
                           })
                     }
              
                })
                .catch((error) => {
                    alert("请求异常")
                })
           }
	}
        
// {
//   "Id": 0,
//   "Name": "string",
//   "Sex": "string",
//   "Company": "string",
//   "Job": "string",
//   "Phone": "string",
//   "Email": "string",
//   "RmsType": "string",
//   "State": 0,
//   "ApplyTime": "2017-09-05T07:56:24.782Z"
// }

}
</script>


<style lang="less">
      html, body,#app,#addApplyFor { 
              height: 100%; margin: 0; background: #F6F6F6;
      }
      .iconfont{
              vertical-align: -1px;
              font-size: 18px;
              color: #0BB6FE;
      }
      //中间部分
     .wx-content{ 
              min-height: 100%; /* Equal to height of footer */ /* But also accounting for potential margin-bottom of last child */
              margin-bottom: -.5rem;
             
        //       overflow: hidden;
              //图片
              .wx-content-img{
                      width: 100%;
                      height: 2.9rem;
                      background: url(./img/applyFor.jpg);
                      background-position: center top;
              }
              .iconfont-tel{
                      padding-left: 0.14rem;
              }
              .iconfont-eml{
                     padding-left: 0.27rem;
              } 
              #name .mu-text-field-input,
              #sex .mu-text-field-input,
              #company .mu-text-field-input,
              #post .mu-text-field-input
              {
                      margin-left: 0.33rem;
              }
              #telphone .mu-text-field-input{
                      margin-left: 0.22rem;
              }
              #mail .mu-text-field-input{
                      margin-left: 0.11rem;
              }
              
      }
      //底层部分
     .wx-footer{ 
              #btn{
                   width: 100%;
                   height: .5rem;
                   background: #00B4FF;
                   color: #Ffffff;
                   border-radius: .5rem;
                   font-size: 16px;
              }
      }
      //表单内容样式
      .mu-text-field{
              margin-bottom: 0px;
      }
        //      样式
      .sp{
              margin-right: .13rem;
      }
      .sp{
              margin-right: .1rem;
      }
      .radio{
              margin-right: 1rem;
              padding:0px 20px;
      }  
      .mu-radio-icon-uncheck{
              position: absolute;
      }     
      .mu-radio-svg-icon{
              height:0.35rem;
      }
      .mu-radio-label{
              position: absolute;
              left: 0.26rem;
              top: 0.06rem;
      }
      .mu-radio-icon{
              margin-right: .3rem;
      }
      .mu-text-field-content{
              padding: 0.08rem 0rem;
      }
      .box-radio{
              padding-top: .08rem;
      }
      .line{
              margin-top:0.08rem;
      }

      .wx-content-1{
              margin-bottom: .2rem;
      }
//       .wx-footer{
//               margin-bottom: .2rem;
//       }
      .mu-radio-icon-checked{
              top: 1px;
      }
    
</style>

